<template>
  <el-container direction="vertical">
    <TopBar></TopBar>
    <el-container>
      <el-aside>
        <UserInfo></UserInfo>
        <Menu></Menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import TopBar from "../../components/Layout/TopBar";
import UserInfo from "../../components/Layout/UserInfo";
import Menu from "../../components/Layout/Menu";
export default {
  name: "Main",
  components: {
    TopBar,
    UserInfo,
    Menu
  }
};
</script>
<style lang="less" scoped>
.el-aside {
  background-color: #f6f6f6;
}
.el-container {
  height: 100%;
}
.el-main {
  border-left: solid 2px gainsboro;
  border-right: solid 2px gainsboro;
  padding: 20px 0 20px 0;
  width: 100%;
  height: 100%;
}

.el-aside,
.el-container,
.el-main {
  overflow: hidden;
}
</style>
